<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
            <div class="disFlex Flex-between">
	   			<div class="disFlex vertical">
	                <div class="component-title">{{moduleData.label_name_cn}}</div>
	                <div class="component-desc	">{{moduleData.label_info_summary}}</div>
	            </div>
	            <div v-if="moduleData.more&&moduleData.more.display=='true'" class="more">查看更多</div>	
	   	    </div>
	        
	        <div class="">
	            <div class="img-wrapper" v-for="item in moduleData.data">
	                <div class="bgCover img" :style="'background-image: url('+ item.image_path +')'"></div>
	            </div>    
	        </div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'GroupModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
        	curpage: 0
    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	
@import url("../baseModule.less");

.img-wrapper {
	width: 100%;
	height: 171px;
	padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;
}
.img-wrapper .img {
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}
	
</style>
